<div id="accordion">
<div class="card">
    <div class="card-header">
        <h4 class="card-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseJudgementTypes">Judgement Types</a></h4>
        <div class="card-tools">
            <span id="judgement-types-count" data-toggle="tooltip" title="?" class="badge bg-primary">?</span>
            <button id="judgement-types-api" type="button" class="btn btn-tool">API</button>
        </div>
    </div>
    <div id="collapseJudgementTypes" class="panel-collapse collapse in">
    <div class="card-body p-0">
        <table id="judgement-types-table" class="table table-sm table-hover table-striped table-head-fixed">
            <thead>
                <tr>
                    <th class="text-center">Id</th>
                    <th width=90%>Name</th>
                    <th>Penalty</th>
                    <th>Solved</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    </div>
</div>
</div>
<script type="text/html" id="judgement-types-template">
  <td align=center><a href="{{api}}"><span class="badge {{badge}}">{{id}}</span></a></td>
  <td>{{name}}</td>
  <td align=center>{{#penalty}}<span class="badge badge-danger"><i class="fas fa-times"></i></a>{{/penalty}}</td>
  <td align=center>{{#solved}}<span class="badge badge-success"><i class="fas fa-check"></i></a>{{/solved}}</td>
</script>
<script type="text/javascript">
registerContestObjectTable("judgement-types");

$(document).ready(function () {
    $.when(contest.loadJudgementTypes()).done(function () {
        fillContestObjectTable("judgement-types", contest.getJudgementTypes())
    }).fail(function (result) {
    	console.log("Error loading judgement types: " + result);
    });
});
</script>